import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  TextInput,
  Platform,
} from 'react-native';
import { t } from 'react-native-tailwindcss';
import React, { useState } from 'react';
import { Avatar } from 'react-native-elements';
import { RadioGroup, RadioButton } from 'react-native-flexi-radio-button';
import DateTimePicker from '@react-native-community/datetimepicker';

import { formatDate } from '../../utils/regular';
import IconFont from '../../assets/iconfont';
import styles from './style';
import appColor from '../../constants/colors';

function MaintainOrderScreen() {
  const iconColor = appColor.gray8;
  const iconColorActive = appColor.theme;
  let optionCar = [
    { url: '', icon: 'icon-weixiukaidan-peijianxiangmu', name: '配件项目' },
    { url: '', icon: 'icon-weixiukaidan-shiguxiangmu', name: '事故项目' },
    { url: '', icon: 'icon-weixiukaidan-xichemeirong', name: '洗车美容' },
    { url: '', icon: 'icon-weixiukaidan-gongshixiangmu', name: '工时项目' },
    { url: '', icon: 'icon-weixiukaidan-huiyuankaxiangmu', name: '会员卡项目' },
    {
      url: '',
      icon: 'icon-weixiukaidan-gongyingshangliebiao',
      name: '供应商列表',
    },
    { url: '', icon: 'icon-weixiukaidan-peijianxunjia', name: '配件询价' },
    { url: '', icon: 'icon-weixiukaidan-chakanxunjia', name: '查看询价' },
  ];
  let nowDTime = new Date().getTime();
  const [date, setDate] = useState(nowDTime);
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);
  const [dateText, setDateText] = useState(formatDate(nowDTime, 'YY-MM-DD'));
  const [timeText, setTimeText] = useState(formatDate(nowDTime, 'hh:mm'));
  const onChange = (event, selectedDate) => {
    if (!selectedDate) {
      return;
    }
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDateText(formatDate(event.nativeEvent.timestamp, 'YY-MM-DD'));
    setTimeText(formatDate(event.nativeEvent.timestamp, 'hh:mm'));
    setDate(currentDate);
  };

  const showMode = currentMode => {
    setShow(true);
    setMode(currentMode);
  };

  const showDatepicker = () => {
    showMode('date');
  };

  const showTimepicker = () => {
    showMode('time');
  };

  return (
    <>
      <View>
        <ScrollView showsVerticalScrollIndicator={false}>
          <View>
            <View style={[styles.navi_title, t.mY4]}>
              <View style={styles.flexCenterXY}>
                <Avatar
                  rounded
                  source={{
                    uri:
                      'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
                  }}
                />

                <Text style={[styles.f28B, t.mL4]}>李小姐（36%）</Text>
              </View>
              <TouchableOpacity style={[styles.flexCenterXY]}>
                <IconFont
                  name="icon-vip"
                  style={t.mR4}
                  size={16}
                  color={iconColorActive}
                />
                <IconFont
                  name="icon-weixin"
                  style={t.mR4}
                  size={16}
                  color={iconColor}
                />
                <IconFont
                  name="icon-xiaochengxu"
                  style={t.mR4}
                  size={16}
                  color={iconColor}
                />
                <IconFont name="icon-down" size={16} color={iconColor} />
              </TouchableOpacity>
            </View>
            <View style={styles.navi_title}>
              <Text style={styles.f28B}>车辆信息</Text>
              <TouchableOpacity style={[styles.flexCenterXY]}>
                <Text style={[t.fontBold, t.textThemeGray1, t.mR5]}>
                  川A9999本田 雅阁 (28%)
                </Text>
                <IconFont name="icon-down" size={16} color={iconColor} />
              </TouchableOpacity>
            </View>
          </View>

          <View style={styles.multipleView}>
            <Text style={styles.faultDescTitle}>请输入故障描述</Text>
            <TextInput
              style={styles.multipleInput}
              multiline
              placeholder="故障描述"
              numberOfLines={4}
            />
          </View>
          <View style={styles.navi_title}>
            <Text style={styles.f28B}>外观检测</Text>

            <IconFont name="icon-right" size={16} color={iconColor} />
          </View>
          <View style={styles.navi_title}>
            <Text style={styles.f28B}>送修人</Text>
            <View style={[styles.flexCenterXY]}>
              <TextInput
                maxLength={10}
                onChangeText={text => console.log(text)}
                placeholder="请输入送修人"
                style={styles.inputText}
              />
            </View>
          </View>
          <View style={styles.navi_title}>
            <Text style={styles.f28B}>送修人电话</Text>
            <View style={[styles.flexCenterXY]}>
              <IconFont
                name="icon-dianhua1"
                size={16}
                style={t.mR2}
                color={iconColorActive}
              />
              <TextInput
                maxLength={11}
                keyboardType="numeric"
                onChangeText={text => console.log(text)}
                placeholder="请输入送修人电话"
                style={styles.inputText}
              />
            </View>
          </View>
          <View style={styles.navi_title}>
            <Text style={[styles.f28B]}>预计交车时间</Text>
            <View style={[styles.flexCenterXY, t.textRight]}>
              <View style={styles.flexCenterXY}>
                <IconFont
                  name="icon-datepicker"
                  style={t.mX6}
                  size={16}
                  color={iconColorActive}
                />
                <View>
                  <TouchableOpacity onPress={showDatepicker}>
                    <Text>{dateText}</Text>
                  </TouchableOpacity>
                </View>
                <IconFont
                  name="icon-time"
                  style={[t.mX6, t.mR2]}
                  size={16}
                  color={iconColorActive}
                />
                <View>
                  <TouchableOpacity onPress={showTimepicker}>
                    <Text>{timeText}</Text>
                  </TouchableOpacity>
                </View>
                {show && (
                  <DateTimePicker
                    testID="dateTimePicker"
                    value={date}
                    minimumDate={new Date()}
                    mode={mode}
                    is24Hour={true}
                    display="spinner"
                    onChange={onChange}
                  />
                )}
              </View>
            </View>
          </View>
          <View style={styles.navi_title}>
            <Text style={styles.f28B}>进店里程</Text>
            <View style={[styles.flexCenterXY]}>
              <TextInput
                keyboardType="numeric"
                maxLength={7}
                placeholder="请输入进店里程"
                onChangeText={text => console.log(text)}
                style={styles.inShopKmIpt}
              />
              <Text style={styles.inShopKmIpt}>KM</Text>
            </View>
          </View>
          <View style={styles.navi_title}>
            <Text style={[styles.f28B]}>进店时间</Text>
            <View style={[styles.flexCenterXY, t.textRight]}>
              <View>
                <Text style={styles.inputText}>2020-09-14 18:20:06</Text>
              </View>
            </View>
          </View>
          <View style={styles.navi_title}>
            <Text style={[styles.f28B]}>进店油表</Text>
            <RadioGroup
              activeColor={iconColorActive}
              style={[styles.flexCenterXY]}
              onSelect={(index, value) => console.log(index, value)}>
              <RadioButton value={'item1'} style={styles.radioButton}>
                <Text>25%</Text>
              </RadioButton>

              <RadioButton value={'item2'} style={styles.radioButton}>
                <Text>50%</Text>
              </RadioButton>

              <RadioButton value={'item3'} style={styles.radioButton}>
                <Text>70%</Text>
              </RadioButton>

              <RadioButton value={'item4'} style={styles.radioButton}>
                <Text>100%</Text>
              </RadioButton>
            </RadioGroup>
          </View>
          <View style={styles.navi_title}>
            <Text style={[styles.f28B]}>是否保养</Text>
            <RadioGroup
              activeColor={iconColorActive}
              style={[styles.flexCenterXY, t._mR6]}
              onSelect={(index, value) => console.log(index, value)}>
              <RadioButton value={1}>
                <Text>是</Text>
              </RadioButton>
              <RadioButton value={2}>
                <Text>否</Text>
              </RadioButton>
            </RadioGroup>
          </View>
          <View style={styles.navi_title}>
            <Text style={[styles.f28B]}>质检员</Text>
          </View>
        </ScrollView>
      </View>
    </>
  );
}

export default MaintainOrderScreen;
